<template>
    <div class="com-step-wrapper">
        <div class="com-step-item" v-for="(item,key) in options" v-bind:key="key">
            <van-icon name="success" :style="key < active ? activeStyle : defaultStyle" size="18" class="icon"/>
            <div :class=" key < 4 ? 'com-step-line' : ''"  :style="{'background-color' : key < active ? '#FF5300' : '' }"/>
        </div>
    </div>

</template>

<script>
    export default {
        name: "ComStep",
        data: function () {
            return {}
        },
        props: {
            activeStyle: {
                // 激活状态颜色
                type: Object,
                default: ()=>{
                    return{
                        color:"#FFFFFF",
                        background:"#dddddd"
                    }
                }
            },
            defaultStyle : {
                // 未激活的颜色
                type: Object,
                default: ()=>{
                    return{
                        color:"#FFFFFF",
                        background:"#FF5300"
                    }
                }
            },
            active: {
                // 当前步骤
                type: Number,
                default: 0
            },
            options: {
                type: Number,
                default : 0
            } // 数据
        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    .com-step-wrapper{
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        .com-step-item{
            flex: 1;
            display: flex;
            display: -webkit-flex;
            justify-items: center;
            align-items: center;
            .icon{
                display: inline-block;
                border-radius: 50rem;
            }
            .com-step-line{
                width: 100%;
                height: 1px;
                display: inline-block;
                background-color: #969696;
            }
            .bg-line{
                background-color: chocolate;
            }
        }
    }
</style>